<template>
  <div class="container">
    <div class="control">
      <h3>按 Shift 进行绘制</h3>
      <el-select @change="keyDown()" v-model="drawType" size="small" class="margin-lt-15" style="width: 210px;">
        <el-option
          v-for="item in drawTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button class="margin-lt-15" size="small" @click="stopDraw()">停止绘制</el-button>
    </div>
    <div id="map-container"></div>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, onUnmounted, ref } from 'vue';
import 'ol/ol.css'
import { Map, View } from 'ol'
import VectorSource from 'ol/source/Vector'
import { Vector as VectorLayer } from 'ol/layer'
import Draw from 'ol/interaction/Draw'
import { Style, Fill as StyleFill, Stroke as StyleStroke } from 'ol/style'
import { useTianTileLayer, projection } from '@/hooks'
import { TiandiTileLayerConfigEnum, KeyEventEnum } from '@/enum'

let map: Map, draw: Draw, source: VectorSource, vector: VectorLayer<VectorSource>

const drawTypes = ref([
  {
    label: '线',
    value: 'LineString'
  },
  {
    label: '面',
    value: 'Polygon'
  },
  {
    label: '圆',
    value: 'Circle'
  },
  {
    label: 'None',
    value: 'None'
  }
])
const drawType = ref<'LineString' | 'Polygon' | 'Circle' | 'None'>('LineString')

onMounted(() => {
  initMap()
  window.addEventListener(KeyEventEnum.ON_KEY_DOWN, keyDown)
})

onUnmounted(() => {
  window.removeEventListener(KeyEventEnum.ON_KEY_DOWN, keyDown)
})

// 初始化地图
function initMap() {
  source = new VectorSource({ wrapX: false });
  vector = new VectorLayer({ source })
  vector.setStyle(new Style({
    fill: new StyleFill({
      color: 'rgba(255, 255, 255, 0.2)'
    }),
    stroke: new StyleStroke({
      color: 'red',
      width: 3
    })
  }))
  map = new Map({
    target: 'map-container',
    layers: [
      ...useTianTileLayer(TiandiTileLayerConfigEnum.SL),
      vector
    ],
    view: new View({
      center: [116.413467,39.914935],
      projection: projection,
      zoom: 10,
      maxZoom: 17,
      minZoom: 1
    })
  })
}

// 按Shift 进行绘制
function keyDown(event?: KeyboardEvent) {
  if((event && event.key === 'Shift') || !event) {
    map.removeInteraction(draw)
    addInteraction()
  }
}

// 调用方法 启用绘制
function addInteraction() {
  const type = drawType.value;
  if (type !== 'None') {
    draw = new Draw({
      source: source,
      type: type,
      freehand: true
    });
    draw.on('drawend', e => {
      // 线、多边形
      console.log((e.feature.getGeometry() as any).getCoordinates()) // 绘制的坐标
      // 圆
      // console.log((e.feature.getGeometry() as any).flatCoordinates) // 绘制的坐标
    })
    map.addInteraction(draw);
  }
}

// 停止绘制
function stopDraw() {
  map.removeInteraction(draw)
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.control {
  width: 100%;
  height: 35px;
  padding-left: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
#map-container {
  width: 100%;
  height: calc(100% - 35px);
  position: relative;
}
.margin-lt-15 {
  margin-left: 15px;
}
</style>